<template>
   <div class="syslog">
       <h4>系统日志</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                                操作人员：
                                <el-select clearable v-model="operatePerson" placeholder="请选择">
                                        <el-option
                                        v-for="item in name"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                </el-select>
                            </div>
                            <div class="demo-input-suffix" style="display:inline-block;">
                                操作日期：
                                <el-date-picker
                                            v-model="registerTime"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd"
                                            style="width:308px;">
                               </el-date-picker>
                                <el-button type="primary" style="margin-left:20px;" @click="searchLog()">搜索</el-button>
                            </div>
                        </div>
               
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;padding:30px 0 10px 0;">
            <div style="padding: 0 30px;">
                <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" >
                 <el-table-column type="index"  width="80" label="序号" align="center" :index="formatter"></el-table-column>
                 <el-table-column prop="name" label="操作人员" width="240" align="center"></el-table-column>
                 <el-table-column prop="addTimeStr" label="操作时间" align="center" width="340">
                </el-table-column>
                <el-table-column prop="ipAddr" label="IP地址" align="center" width="180">
                </el-table-column>
                 <el-table-column prop="moduleName" label="操作记录" align="center">
                </el-table-column>
            </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                <!-- <el-pagination  background  layout="prev, pager, next" :total="total" 
                                 @current-change="getPageNum"
                                style="text-align:left;">
                </el-pagination> -->
                 <el-pagination
                     @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                 </el-pagination>
           </div>
      </div>
  </div>  
</template>

<script>
import { sysLog,getoprateP } from '@/request/api'
export default {
    data(){
        return {
           loading:true,
           data: [],
           pageNum:1,
           pageSize:10,
           total:0,
           name:[], // 操作人员下拉框
           operatePerson:'', // 操作人员 
           registerTime:'' // 操作时间
        }
    },
    created(){
        this.get_sysLog();
        this.getOpratePerson();
    },
    methods:{
      formatter(row, column ) {
            return  this.pageSize*(this.pageNum-1) + 1 + row;
      },
      searchLog(){
           this.get_sysLog(); 
      },
      getPageNum(e){
          this.pageNum = e;
          this.get_sysLog();
      },
      get_sysLog(){
          sysLog({
             pageNum:this.pageNum,
             pageSize:this.pageSize,
             name:this.operatePerson,
             startDate: (this.registerTime && this.registerTime[0] ) || '',
             endDate: (this.registerTime &&  this.registerTime[1] ) || ''
          }).then(res => {
               this.data = res.rows;
               this.total = res.total;
               this.loading = false;
          })
      },
      getOpratePerson(){
            getoprateP().then(res => {
                this.name = res.data;
                console.log(res);
            })
      },
      handleSizeChange(e){
          console.log(e)
         this.pageSize = e;
          this.get_sysLog();
      }
    }
 }
</script>
<style  scoped>
.syslog {
        width:100%;
        height: 100%;
}
.syslog h4 {
    line-height: 22px;
    border-left: 5px solid #33cccc;
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>